<template>
	<view class="detailPage">

		<swiper class="swiper" indicator-dots=true autoplay interval="3000" duration="500">
			<swiper-item v-for="(item,index) in goodsInfo.pics" :key="index">
				<view class="swiper-item">
					<image :src="item.pics_mid" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 商品价格 -->
		<view class="goodsPrice" v-if="goodsInfo.goods_price">
			¥{{goodsInfo.goods_price | dealwithPrice}}
		</view>
		<!-- 商品标题 -->
		<view class="goods-titBox" v-if="goodsInfo.goods_price">
			<view class="goods-title">
				{{goodsInfo.goods_name}}
			</view>
			<view class="goods-collect">
				<view class="collect-icon">
					<uni-icons type="star" size="20" color="#b7b7b7"></uni-icons>
				</view>
				<view>
					收藏
				</view>
			</view>
		</view>
		<!-- 运费 -->
		<view class="kuaidi">
			快递:免运费
		</view>

		<!-- 商品描述大图 -->
		<!-- 使用rech-text富文本组件 -->
		<rich-text :nodes="goodsInfo.goods_introduce"></rich-text>

		<!-- 底部商品导航 -->
		<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
			@buttonClick="buttonClick" />
	</view>
</template>

<script>
	// 从 vuex 中按需导出 mapState 辅助方法
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex'

	export default {
		computed: {
			...mapState('m_cart', []),
			// 把 m_cart 模块中名称为 getCount 的 getter 映射到当前页面中使用
			...mapGetters('m_cart', ['getCount']),
		},
		data() {
			return {
				goodsInfo: {},
				options: [{
					icon: 'shop',
					text: '店铺',
					infoColor: "red"
				}, {
					icon: 'cart',
					text: '购物车',
					info: 0
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#4cc6aa',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#4dd6aa',
						color: '#fff'
					}
				]
			};
		},
		watch: {
			// 定义 getCount 侦听器，指向一个配置对象
			getCount: {
				//** handler 属性用来定义侦听器的 function 处理函数** 见https://cn.vuejs.org/v2/api/#watch
				handler(newVal) {
					// 通过数组的 find() 方法，找到购物车按钮的配置对象
					const findResult = this.options.find(x => x.text === '购物车');
					if (findResult) {
						// 动态为购物车按钮的 info 属性赋值
						findResult.info = newVal
					}
				},
				//** immediate 属性用来声明此侦听器，是否在页面初次加载完毕后立即调用**
				immediate: true
			}
		},
		onLoad(option) {
			let goods_id = option.goods_id;
			console.log(goods_id)
			this.getGoodsDetail(goods_id);
		},
		methods: {
			// 把 m_cart 模块中的 addToCart 方法映射到当前页面使用
			...mapMutations('m_cart', ['topushCart']),

			// 点击添加购物车或立即购买 按钮
			buttonClick(e) {
				console.log(e);
				if (e.content.text === '加入购物车') {
					let goods = {
						goods_id: this.goodsInfo.goods_id,
						goods_name: this.goodsInfo.goods_name,
						goods_price: this.goodsInfo.goods_price,
						goods_count: 1,
						goods_small_logo: this.goodsInfo.goods_small_logo,
						goods_state: this.goodsInfo.goods_state
					}
					// 3. 通过 this 调用映射过来的 topushCart 方法，把商品信息对象存储到购物车中
					this.topushCart(goods)
				}
				
				if (e.content.text === '立即购买') {
					let goods = {
						goods_id: this.goodsInfo.goods_id,
						goods_name: this.goodsInfo.goods_name,
						goods_price: this.goodsInfo.goods_price,
						goods_count: 1,
						goods_small_logo: this.goodsInfo.goods_small_logo,
						goods_state: this.goodsInfo.goods_state
					}
					// 3. 通过 this 调用映射过来的 topushCart 方法，把商品信息对象存储到购物车中
					this.topushCart(goods)
					uni.switchTab({
						url:'../../pages/cart/cart'
					})
				}
			},

			// 点击店铺 或 购物车
			onClick(e) {
				console.log(e)
				if (e.content.text === '购物车') {
					uni.switchTab({
						url: "../../pages/cart/cart"
					})
				}
				if (e.content.text === '店铺') {
					uni.$showMsg('此功能暂未开放')
				}
			},

			async getGoodsDetail(goods_id) {
				let {
					data: res
				} = await uni.$http.get(`/api/public/v1/goods/detail?goods_id=${goods_id}`)
				if (res.meta.status !== 200) return uni.$showMsg();
				// 处理返回数据中goods_introduce里面图片间距问题,把所有的<img 替换成<img style = "display:block;"
				// 由于webp格式图片在ios设备上显示得不是很好，所以要替换成jpg
				res.message.goods_introduce = res.message.goods_introduce.replace(/<img /g,
					'<img style = "display:block;"').replace(/wepp/g, 'jpg');

				this.goodsInfo = res.message;
				console.log('this.goodsInfo', this.goodsInfo)
			}
		},
		filters: {
			dealwithPrice(price) {
				return Number(price).toFixed(2)
			}
		}
	}
</script>

<style lang="scss">
	// 底部导航
	.uni-goods-nav {
		position: fixed;
		bottom: 0rpx;
		left: 0;
		z-index: 999;
		width: 100%;
	}

	// 运费
	.kuaidi {
		line-height: 60rpx;
		font-size: 28rpx;
		color: #c7c7c7;
		padding-left: 20rpx;
	}

	// 商品价格
	.goodsPrice {
		padding-left: 20rpx;
		font-size: 36rpx;
		color: #e4393c;
		line-height: 70rpx;
	}

	// 商品标题
	.goods-titBox {
		display: flex;
		padding-left: 20rpx;
		height: 80rpx;
		justify-content: space-around;

		.goods-title {
			flex: 1;
			font-size: 28rpx;
			overflow: hidden;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			text-overflow: ellipsis;
		}

		.goods-collect {
			width: 130rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border-left: 4rpx solid #e7e7e7;
			margin-left: 20rpx;
			font-size: 30rpx;
			color: #b7b7b7;
		}
	}

	// 轮播图
	.swiper {
		height: 750rpx;
	}

	.swiper-item {
		width: 750rpx;
		height: 750rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.detailPage {
		padding-bottom: 100rpx;
	}
</style>
